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Abstract 

This presentation will show how JavaScript can be used within HTML pages to add interactive review 
sessions and quizzes incorporating graphics and sound files. JavaScript has the advantage of providing 
basic interactive functions without the use of separate software applications and players. Because it can be 
part of a standard HTML page, it is cross-platform as well. Templates will be provided to participants to 
enable them to customize their own pages without having to learn JavaScript in any detail. 

IlQEl 

Introduction 

Interactive exercises are a valuable addition to class web pages. They allow students to review material and 
to get immediate feedback as they answer questions. A wide variety of software products allow teachers to 
customize quizzes and exercises for their students. Frequently these are platform specific or they require 
applications or players to be loaded on to the machine. By contrast, JavaScript can be placed directly into 
HTML text files and thus can provide an easy and economical alternative to the use of separate 
applications. 

IlQEl 

What is Javascript? 

JavaScript should not be confused with Java. Java is a compiled programming language, similar to C. It has 
the ability to write major applications and insert them in a web page as a special object called an "applet." 
Java is also unique in its ability to run the same program on IBM, Mac, and Unix computers. Java is not 
considered an easy-to-use language for non-programmers. JavaScript, on the other hand, is a scripting 
language that can be used by average Web designers. It is particularly attractive to non-programmers 
because it requires no separate applications or compilers. It is simply scripted text that is incorporated into 







8/1 1/99 9:50 AM 



http://www.mtsu.edu/-itconf/proceed99/gray.htm 



a HTML page to add enhanced interaction with the user. For this reason, it is attractive to educators who 
would like to take a step beyond putting class materials on the Web. JavaScript can provide a variety of 
opportunities interaction with students. 

IlQEl 

Method 

It would be misleading to say that JavaScript is as easy to learn as basic HTML. However, as with learning 
HTML, the best way to get started is to study the code for existing projects on the Web and adapt it. To see 
the text of the code it is only necessary to View Page Source code, save it as a text file, customize it, and 
load it on a server. In the Web Resources section below are a number of JavaScript resource sites available 
on the Web. The list contains archives of scripts as well as tutorials for those interested in learning to 
program in Javascript. The tutorial in JavaScript for the Non-Programmer published by Webteacher.com is 
particularly helpful. 

When adapting scripts it is important to be aware of copyright issues. Frequently, the text of the code 
includes instructions to keep the copyright notice in the code even after making changes. This notice may 
be "commented out" so it is only visible in the source code, not on the actual web page. Requests to 
include code should be scrupulously observed. 

IlQEl 

Application 

JavaScript is particularly helpful in creating objective interactive reviews for courses that require the 
memorization of terms, translations, and other types of short answers. These quizzes can be used as part of 
class home pages that provide a wide variety instructional information. Currently at Rhodes, they are used 
only for review and not for on-the-record grades. Small class size minimizes the need for a distance 
learning approach to testing. However, online reviews that are available in the labs and wired dormitories 
are valuable in that they adapt to students' variable study schedules. 

Student reaction to online reviews in Rhodes music courses has been overwhelmingly positive. Student 
evaluations credit the exercises with "actively engaging" them with the material. Some of the exercises 
were created by the students themselves who were intrigued by the idea of producing study materials that 
will be available on the Web long after the class is finished. Students seem to be more critical of materials 
they create for distribution over the Web than they are for work that is only seen by the professor. 
JavaScript quizzes can be created as a collaborative effort between students and professor. They also have 
the advantage of being very easy to edit and update. 

The following Rhodes College music course sites use JavaScript in a variety of ways: 

Music 227-228: European Musical Heritage 
http://gray.music.rhodes.edu/musichtmls/mh.html 

Music 121: History of Opera (The Butterfly Project) 
http://grav.music.rhodes.edu/musichtmls/bfproi.html 

Music 1 16: Music and Society 

http://grav.music.rhodes.edu/musichtmls/music 1 16.html 

A technical advantage of JavaScript is the ability to save the code as a plain text file, store it on a 
CD-ROM and view it with any browser. This allows students to have portable review files that can be 
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viewed locally without a live connection to the Internet. CD-ROMs of this type can now be produced 
easily and economically and can be sold along with the traditional text book. 

IlQEl 

Examples 

The following are examples of simple scripts that provide difference functions for objective online tests. 
Following the link to the test will demonstrate how its format. The abbreviated script in the appendix cuts 
away all be the essential code. The only sections that need to be customizes are indicated in red bold type. 



True-False with Hints Given After Incorrect Answers 
http://gray.music.rhodes.edu/MTSU99/tfquiz.html 
Abbreviated Script— See Appendix A 

Multiple Choice with Immediate Response to Each Question 
http://gray.music.rhodes.edu/MTSU99/heroine.html 
Abbreviated Script— See Appendix B 

Multiple Choice with Correct and Incorrect Answers Given after Submission 
http://gray.music.rhodes.edu/MTSU99/ 

Abbreviated Script— See Appendix C 

Multiple Choice with Penalty for Incorrect Answers 
http://gray.music.rhodes.edu/MTSU99/proktest.html 

[Script is too long to include in appendix. Download from source code at the URL on the preceding line.] 

ITopl 

Conclusion 

JavaScript provides a streamlined, efficient, and economical way of providing interaction to web pages. 
Currently, adapting pre-existing code is best way for educators to begin to take advantage of it. This must 
be done in plain text documents because the most popular entry level web page editors do not support it. 
However, more professional products, such as Adobe's GoLive 4.0 . now provide some JavaScript editing 
capabilities and point the way to easier use in the future. 

ITopl 



Web Resources 



Tutorials: 

Javascript for the Non-Programmer: http://www.webteacher.com/iavatour/ 

Thau's JavaScript Tutorial: http://www.hotwired.com/webmonkev/iavascript/tutorials/tutoriall.html 
Developer.com Tutorial: http://www.developer.com/classroom/tutorials/cl javascript.html 



Script Archives: 

The JavaScript Source: http://) avascript.intemet.com/ 

JavaScript.com: httD://www.iavascripts.com 

The Last Wave JavaScript Source: http://www.thelastdomain.com/alan/thelastwaved.html 
Java Goodies: A Repository of Scripts: http://www.)avagoodies.com 
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Cut'and Paste JavaScripts: http://www.infohiwav.com/iavascript/indexf.htm 
Ilopl 

Suggested Reading 

Flanagan, David. JavaScript: The Definitive Guide, 3rd ed. O'Reilly and Associates, 1998. 

ISBN: 1565923928 

Frentzen, Jeff, Henry Sobotka, and Dewayne McNair. Javascript Annotated Archives. 

Osborne McGraw-Hill, 1998. ISBN: 0078823641 

Goodman, Danny. JavaScript Bible, 3rd ed. IDG Books Worldwide, March 1998. ISBN: 0764531883 

Heinle, Nick. Designing With JavaScript : Creating Dynamic Web Pages (Web Review Studio Series). 
O'Reilly and Associates, 1997. ISBN: 1565923006 

Lund, William B. and Brian Holman. Instant JavaScript. Prentice-Hall, 1996. ISBN: 0132684349 

Negrino, Tom and Dori Smith. JavaScript for the World Wide Web: Visual QuickStart Guide, 2nd ed. 
Peachpit Press. ISBN: 0201696487 

Neou, Vivian and Curt Aubley. HTML 4.0 CD with Javascript . Prentice Hall, 1999. ISBN: 0130957836 

Purcell, Lee, and Mary Jane Mara (Contributor). The ABCs of Javascript. Sybex, January 1997. 

ISBN: 0782119379 
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Appendix A 



Instructions for Use of Appendices 

Copy and paste the code into a plain text document such as one created by SimpleText or NotePad. Do not 
copy the text into an HTML editor unless you are sure that it supports JavaScript. Only the sections 
in red bold type should be customized. 



<HTML> 

<HEAD> 

<TITLE>Opera Quiz<ATITLE> 

<SCRIPT LANGUAGE="JavaScript"> 

<!— hide from old browsers 
function userAlert() 

{ 

alert("Very good!"); 

} 

function userAlert2() 

( 

alertC'No, but a Pushkin poem was used for Boris Godunov."); 
} 

function userAlert3() 



{ 

alertC'It was a bass. Feodor Chaliapin was a famous Boris."); 
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• <!— done hiding --> 

</SCRIPT> 

</HEAD> 

<BODY BGCOLOR="#ffffff ■> 

<H3 ALIGN=CENTER>Opera Quiz</H3> 

<B>1. The title role in Moussorgsky's <I>Boris Godunov</l> is sung by a bass. </B> 
<FORM> <INPUT TYPE="button" VALUE=" True " onClick="userAlert()"> 

<INPUT TYPE="button" VALUE=" False "onClick="userAlert3()" ></FORM></P> 

<P> 

<B>2. Glinka's <I>A Life for the Tsar</I> was based on poem by Pushkin.</B> 
<FORMxINPUT TYPE="button" VALUE=" True " onClick="userAlert2()" > 

<INPUT TYPE="button" VALUE=" False " onClick="userAlert()"></FORMx/P> 
</BODY> 

</HTML> 

Heel 
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<html> 

<head> 

<title>Puccini Heroine Quiz</title> 

<script> 

<!— hide 

/* GameQuiz vLO by Monichar. 

Copyright (c) of Monichar, 1997. 

Permission to use, edit, etc. granted as long as the head section is intact! 
*/ 

var ans = new Array; 
var done = new Array; 
var text = new Array; 
var score = 0; 
ans[l]= "d"; 
ans[2] = "c"; 

text[l] = "Puccini's operas usually revolve around the heroine."; 

text[2] = "No, it was Musetta."; 

function Engine(question, answer) { 

if (answer != ans[question]) { 

if (!done[question]) { 

done[question] = - 1 ; 

alert(" Wrong !\n\n Your score is now: " + score + "\n\n" +text[question]); 

} 

else { 

alert("You have already answered that!"); 

} 

} 

else { 

if (!done[question]) { 
done[question] = - 1 ; 
score++; 

alert( "Correct !\n\n Your score is now: " + score); 

} 

else { 

alert("You have already answered that!"); 

} 

} 

} 

//-> 

</script> 
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<BODY BGCOLOR="#ffffff '> 

<center><H2>Puccini Heroine Quiz</H2></center> 

This script will automatically check your answers for you.<p> 

<b>JavaScript required !</bxp> 

<noscript>JavaScript is <b><i>disabled</bx/i>. Get Netscape 3.0 or turn it on!c/noscript> 

<form> 

<b>l. The action in most of Puccini^s operas seems to pivot around :</bxp> 

<input type=radio value="a" onClick="Engine(l, this.value)">the enemy<br> 

<input type=radio value="b" onClick="Engine(l, this. value) ">the hero<br> 

<input type=radio value="c" onClick="Engine(l, this. value) ">the chorus<br> 

<input type=radio value="d" onClick="Engine(l, this.value)">the heroine<p> 

<b>2. The New Grove Dictionary of Music and Musicians describes the Puccini Heroine as ”frail creatures who 
live and die for love”. This is true of all of the following except:</bxp> 

<input type=radio value="a" onClick="Engine(2, this. value) ">Vio!ette<br> 

<input type=radio value="b" onClick="Engine(2, this. value) ">Manon Lescaut<br> 

<input type=radio value="c" onClick="Engine(2, this. value) ">Musetta<br> 

<input type=radio value="d" onClick="Engine(2, this. value) ">Mimi<p> 

</form> 

<H4>Reload the page to take the test again.</H4> 

</BODY> 

</HTML> 
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<html> 

<title>Prokofiev Test</title> 

<body bgcolor=#ffffff text=#l 11188 link=#CC6600 vlink=#006633 alink=#FF0033> 
<script language="JavaScript"> 

//function to display the answers 
function display_answers(){ 

if (document.quiz.answerl[0].checked == true) document.quiz.al.value=” A"; 
if (document.quiz.answerl[l].checked == true) document.quiz.al.value=" B"; 
if (document.quiz.answerl [2] .checked == true) document.quiz.al.value=" C”; 
if (document.quiz.answerl [3]. checked == true) document.quiz.al.value=" D"; 
if (document.quiz.answer2[0].checked == true) document.quiz.a2.value=” A”; 
if (document.quiz.answer2[l].checked == true) document.quiz.a2.value=" B"; 
if (document.quiz.answer2[2].checked == true) document.quiz.a2.value=" C"; 
if (document.quiz.answer2[3].checked == true) document.quiz.a2.value=" D”; 

} 

//function total the quiz answers 
// assigns correct answers in array, 
function total () { 
var tot = 0; 

//answei#[0-3] 0=A, 1=B, 2=C, 3=D 
if (document.quiz.answerl[0].checked == true) tot = 1; 
document.quiz.q 1 . value=" A " ; 

if (document.quiz.answer2[3].checked == true) tot += 1; 
document.quiz.q2.value=”D"; 

if (tot==2) document.quiz.totalscore.value ="2 out of 2, Very Good!"; 

else document.quiz.totalscore.value = "You answered " + tot + " out of 2 correctly."; 



</scriptxbr> 

<CENTERxh3>Prokofiev Test</h3x/CENTER> 

<form name="quiz"> 

<table border="0" cellpadding="7" width="600"xtr> 

<td valign="top" width="300"> 

<B>1. Prokofiev received his early conservatory training in;</Bxbr> 
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A <input type="radio" name="answerr’>St Petersburg<br> 

B <input type="radio" name="answerr’>Moscow<br> 

C <input type="radio" name="answerr’>Stalingrad<br> 

D <input type="radio" name="answerr’>Novgorod</td> 

<td valign=”top" width="300"> 

<B>2. All of the following are characteristic of Prokofiev*s early piano music except: </Bxbr> 

A <input type= "radio" name="answer2">striking use of dissonance<br> 

B <input type="radio" name="answer2">machine like rhythmic passages<br> 

C <input type="radio" name="answer2">strong sense of percussion<br> 

D <input type="radio" name="answer2">left hand lines modeled after those of Chopin</td> 

</tr> 

<tr> 

</tr>c/table> 

<table border="0"xtr> 

<td width="300"xinput type="button" value="Submit" onclick="total(); display_answers();">   <input type="reset" 
value="Reset"x/td> 

<td width="400"xinput type="text" size="50" name="totalscore"xbrx/td> 

</trx/table> 

<P> 

<CENTERxtable border="0"xtr> 

<td valign="top" width="125"xb>Your Answers</bxbr> 

Q 1: <input type="text" size="2" name="al"xbr> 

Q 2: <input type="text" size="2" name="a2"xbr> 

</td> 

<td valign="top" width="125"xb>Correct Answers</bxbr> 

Q 1: <input type="text" size="2" name="ql"xbr> 

Q 2: <input type="text" size="2" name="q2"xbr> 

</td> 

</trx/tablex/CENTER> 

</body> 

</html> 

Contact: 

Patricia Gray. Ph>D 

Assistant Professor of Music 
Rhodes College 
Memphis, TN 
gray @ rhodes^edu 
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